/* eslint-disable react/prop-types */
import { Button, Flex, Form, Input, Modal, Typography } from "antd"
import { useCallback, useState } from "react"

import { queryFlowAdjust, queryGetVerifyCodeType } from "@/api/member"
import { IFlowAdjustParams } from "@/api/member/types"
import { IMemberParams } from "@/api/risk/types"
import { SFormItem } from "@/components/common"
import { Toast } from "@/components/messages"
import { useLocale } from "@/locales"

import { CustomTextArea } from "../../basicInfo/components/CustomTextArea"
import { StyleSelect } from "../../basicInfo/styles"
import { StyleModalLabel } from "../styles"
import { VerifyModal } from "./VerifyModal"

interface IManualAdjustmentModalProps {
	value: string
	data: IMemberParams
}
const optionsAdjustmentType = (newFormat: any) => [
	{ label: newFormat("member.required_flow.increase"), value: "1" },
	{ label: newFormat("member.required_flow.deduct"), value: "2" }
]

export const ManualAdjustmentModal: React.FC<IManualAdjustmentModalProps> = ({ value, data }) => {
	const [form] = Form.useForm()
	const [isModalOpen, setIsModalOpen] = useState(false)
	const [isModalVerify, setIsModalVerify] = useState(false)
	const { formatMessage, newFormat } = useLocale()
	const [submitParams, setSubmitParams] = useState({
		adjustType: "",
		amount: 0,
		googleVerifyCode: "",
		memberId: data.merchantId,
		merchantId: data.merchantId,
		remark: ""
	})
	const submit = useCallback(
		async (values: any) => {
			const body = {
				...values,
				memberId: data.merchantId,
				merchantId: data.merchantId,
				adjustType: values.adjustType ? values.adjustType : "1",
				remark: values.remark ? values.remark : ""
			}
			setSubmitParams(body)
			setIsModalVerify(true)
			await handleVerifyCode()
		},
		[data]
	)
	const handleCancelVerify = () => {
		setIsModalVerify(false)
	}
	const handleChangeInputVerify = async (value: string) => {
		const body = {
			...submitParams,
			googleVerifyCode: value
		}
		setSubmitParams(body)
		await handleFlowAdjust(body)
		setIsModalVerify(false)
	}
	const handleFlowAdjust = async (body: IFlowAdjustParams) => {
		const [err] = await queryFlowAdjust(body)
		if (err) Toast.error(err.msg)
	}
	const handleVerifyCode = async () => {
		const [err] = await queryGetVerifyCodeType()
		if (err) Toast.error(err.msg)
	}
	return (
		<StyleModalLabel>
			<Typography className="text-primary" onClick={() => setIsModalOpen(true)}>
				{value}
			</Typography>
			<Modal
				footer={null}
				centered
				title={
					<Typography style={{ textAlign: "center", marginBottom: "30px" }}>
						{formatMessage({ id: "member.required_flow.title" })}
					</Typography>
				}
				onCancel={() => {
					setIsModalOpen(false)
					form.resetFields()
				}}
				open={isModalOpen}
			>
				<Form form={form} onFinish={submit} initialValues={{ adjustType: "1" }}>
					<Form.Item>
						<SFormItem
							style={{ marginBottom: "20px" }}
							name="adjustType"
							rules={[{ required: true }]}
							label={formatMessage({ id: "member.required_flow.adjustment_type" })}
						>
							<StyleSelect options={optionsAdjustmentType(newFormat)} w={200} allowClear />
						</SFormItem>
						<Form.Item
							name="amount"
							label={formatMessage({ id: "member.required_flow.adjust_quantity" })}
							rules={[{ required: true, message: formatMessage({ id: "common.please_enter" }) }]}
						>
							<Input type="number" allowClear />
						</Form.Item>

						<CustomTextArea
							placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
							name="remark"
							label={formatMessage({ id: "member.required_flow.remark" })}
						/>

						<Flex justify="center" gap={10} className="marginTop">
							<Button
								htmlType="button"
								onClick={() => {
									setIsModalOpen(false)
									form.resetFields()
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button type="primary" htmlType="submit">
								{formatMessage({ id: "member.table_info.confirm" })}
							</Button>
						</Flex>
					</Form.Item>
				</Form>
			</Modal>
			<VerifyModal
				isModalVerify={isModalVerify}
				handleCancelVerify={handleCancelVerify}
				handleChangeInputVerify={handleChangeInputVerify}
			/>
		</StyleModalLabel>
	)
}
